(function (window) {
	const app = Vue.createApp({
		data() {
			// Data函数应该返回一个对象
			return {
				todos: [],
				// 新增任务输入框绑定值
				todoName: '',
				now: -1,
				// 过滤类型
				filterType: 'ALL'
			}
		},

		methods: {
			// axios-获取任务列表
			getTodoList() {
				axios({
					method: 'get',
					url: 'http://localhost:3000/todos?_sort=id&_order=desc'
				}).then(res => {
					this.todos = res.data
				}).catch(err => {
					console.log(err)
				})
			},
			// 删除任务，根据任务id
			delTodo(id) {
				axios({
					method: 'delete',
					url: `http://localhost:3000/todos/${id}`
				}).then(res => {
					// 删除数据成功，代表服务器已经数据已经删除成功。
					// 重新发送一个请求，获取最新的任务列表
					this.getTodoList()
				})
			},
			// 添加任务
			addTodo() {
				axios({
					method: 'post',
					url: 'http://localhost:3000/todos',
					data: {
						name: this.todoName,
						flag: false
					}
				}).then(res => {
					// 重新渲染
					this.getTodoList()
					this.todoName = ''
				})
			},
			// 显示修改框
			showEdit(id) {
				this.now = id
			},
			// 修改任务:根据id来修改对应的数据
			editTodo(id, data) {
				axios({
					method: 'patch',
					url: `http://localhost:3000/todos/${id}`,
					data: data
				}).then(res => {
					this.getTodoList()
				})
			},
			// 修改任务状态
			changeState(id, flag) {
				this.editTodo(id, {flag})
			},
			// 修改任务名称
			updateTodo(id, name) {
				this.now = -1
				this.editTodo(id, {name})
			},
			// 清空已完成任务
			clearTodo() {
				// 1. 确定哪些任务需要删除
				// 2. 循环，挨个删除
				this.todos.filter(item => item.flag).forEach(item => this.delTodo(item.id))
			},
			// 切换过滤类型
			change(filterType) {
				// 控制样式判断值
				this.filterType = filterType
			},


		},
		computed: {
			//控制是否显示Footer
			isShowFooter() {
				// 当任务数量超过0，就显示footer
				return this.todos.length > 0
			},
			// 统计未完成的任务
			unCompletedCount() {
				// 过滤出未完成的任务
				// this.todos.filter(item => !item.flag)
				return this.todos.filter(item => !item.flag).length
			},
			// 控制清空按钮的显示隐藏
			isShowClear() {
				// 如果没有已完成任务，就隐藏
				// 如果存在已完成任务，便显示
				return this.todos.some(item => item.flag)
			},
			// 控制是否全部选中
			// 需要修改，提供set函数
			isCheckedAll: {
				get() {
					// 当所有的任务都完成了，表示都选中了
					return this.todos.every(item => item.flag)
				},
				set(value) {
					// console.log(value)
					// value修改后的计算属性，，，，，，应该修改todos中所有的任务的flag
					this.todos.forEach(item => item.flag = value)
				}
			},
			// 用于显示的列表
			showList() {
				// 计算属性showList 要根据 filterType
				if (this.filterType === 'Active') { // 返回未完成的任务
					return this.todos.filter(item => !item.flag)
				} else if (this.filterType === 'Completed') { // 返回已完成的任务
					return this.todos.filter(item => item.flag)
				} else { // 默认返回所有任务
					return this.todos
				}
			}

		},

		created() {
			this.getTodoList()
		}


	})

	const vm = app.mount('.todoapp')
	window.vm = vm

})(window);
